<template>
  <div class="about-us-page">
    <!-- 页面标题 -->
    <div class="page-title">
      <h1>关于我们</h1>
    </div>

    <!-- 简介板块 -->
    <el-card class="intro-card">
      <template #header>
        <div class="card-header">我们的使命</div>
      </template>
      <div class="card-content">
        <p>
          我们致力于打造一个专业、权威且充满活力的新闻资讯平台，为全球用户提供全方位、多角度的新闻报道。我们的团队由一群怀揣新闻理想、充满激情与责任感的专业人士组成，始终秉持客观、公正、真实的原则，深入挖掘每一个新闻事件背后的故事，让用户能够及时、准确地了解世界动态。
        </p>
      </div>
    </el-card>

    <!-- 团队介绍板块 -->
    <el-card class="team-card">
      <template #header>
        <div class="card-header">核心团队</div>
      </template>
      <div class="card-content">
        <!-- 前三个成员 -->
        <el-row :gutter="20" justify="center">
          <!-- 成员 1 -->
          <el-col :span="8">
            <el-card class="member-card">
              <img
                src="https://via.placeholder.com/150"
                alt="Member 1"
                class="member-avatar"
              />
              <h3 class="member-name"><a href="https://gitee.com/GA1st">廖星星</a></h3>
              <p class="member-title">项目组长</p>
              <p class="member-description">
                拥有多年吹水经验，实际上啥也不会，著名Tab工程师。
              </p>
            </el-card>
          </el-col>
          <!-- 成员 2 -->
          <el-col :span="8">
            <el-card class="member-card">
              <img
                src="https://via.placeholder.com/150"
                alt="Member 2"
                class="member-avatar"
              />
              <h3 class="member-name"><a href="https://gitee.com/javas_yang">深圳彭于晏</a></h3>
              <p class="member-title">资深java工程师</p>
              <p class="member-description">
                天马行空的想法，善于将简单问题复杂化。
              </p>
            </el-card>
          </el-col>
          <!-- 成员 3 -->
<!--          <el-col :span="8">-->
<!--            <el-card class="member-card">-->
<!--              <img-->
<!--                src="https://via.placeholder.com/150"-->
<!--                alt="Member 3"-->
<!--                class="member-avatar"-->
<!--              />-->
<!--              <h3 class="member-name">王五</h3>-->
<!--              <p class="member-title">技术总监</p>-->
<!--              <p class="member-description">-->
<!--                负责平台的技术架构和开发，确保系统的稳定运行。-->
<!--              </p>-->
<!--            </el-card>-->
<!--          </el-col>-->
        </el-row>
        <!-- 成员 4 和 5 居中排列 -->
<!--        <el-row :gutter="20" justify="center">-->
<!--          &lt;!&ndash; 成员 4 &ndash;&gt;-->
<!--          <el-col :span="8">-->
<!--            <el-card class="member-card">-->
<!--              <img-->
<!--                src="https://via.placeholder.com/150"-->
<!--                alt="Member 4"-->
<!--                class="member-avatar"-->
<!--              />-->
<!--              <h3 class="member-name">王五</h3>-->
<!--              <p class="member-title">技术总监</p>-->
<!--              <p class="member-description">-->
<!--                负责平台的技术架构和开发，确保系统的稳定运行。-->
<!--              </p>-->
<!--            </el-card>-->
<!--          </el-col>-->
<!--          &lt;!&ndash; 成员 5 &ndash;&gt;-->
<!--          <el-col :span="8">-->
<!--            <el-card class="member-card">-->
<!--              <img-->
<!--                src="https://via.placeholder.com/150"-->
<!--                alt="Member 5"-->
<!--                class="member-avatar"-->
<!--              />-->
<!--              <h3 class="member-name">王五</h3>-->
<!--              <p class="member-title">技术总监</p>-->
<!--              <p class="member-description">-->
<!--                负责平台的技术架构和开发，确保系统的稳定运行。-->
<!--              </p>-->
<!--            </el-card>-->
<!--          </el-col>-->
<!--        </el-row>-->
      </div>
    </el-card>

    <!-- 联系我们板块 -->
    <el-card class="contact-card">
      <template #header>
        <div class="card-header">联系我们</div>
      </template>
      <div class="card-content">
        <p>如果您有任何问题、建议或合作意向，请随时通过以下方式联系我们：</p>
        <el-list>
          <el-list-item
            >邮箱：<a href="mailto:example@example.com"
              >example@example.com</a
            ></el-list-item
          >
          <el-list-item
            >电话：<a href="tel:123-456-7890">123 - 456 - 7890</a></el-list-item
          >
          <el-list-item>地址：XX 市 XX 区 XX 路 XX 号</el-list-item>
        </el-list>
      </div>
    </el-card>
  </div>
</template>

<script setup>
// 这里可以添加逻辑代码，如果需要的话
</script>

<style scoped>
.about-us-page {
  padding: 20px;
}

.page-title {
  text-align: center;
  margin-bottom: 30px;
  margin-top: 30px;
}

.page-title h1 {
  font-size: 36px;
  color: #333;
}

.intro-card,
.team-card,
.contact-card {
  margin-bottom: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.card-content {
  padding: 20px;
}

.member-card {
  text-align: center;
  padding: 20px;
}

.member-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.member-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.member-title {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.member-description {
  font-size: 14px;
  color: #999;
}

.contact-card a {
  color: #1890ff;
  text-decoration: none;
}

.contact-card a:hover {
  text-decoration: underline;
}
</style>
